<template>
  <div class="modify">
    <my-header
      class="modify__header"
      :leftText="headerInfo.leftText"
      :title="headerInfo.title"
    ></my-header>

    <div class="modify__content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="userInfo.nickname"
          name="nickname"
          label="用户名"
          placeholder="用户名"
          clearable
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="userInfo.gender"
          name="gender"
          label="性别"
          placeholder="性别"
          clearable
          :rules="[{ required: true, message: '请填写性别' }]"
        />
        <van-field
          v-model="userInfo.email"
          name="email"
          label="邮箱"
          placeholder="邮箱"
          clearable
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />
        <van-field
          v-model="userInfo.birthday"
          name="birthday"
          label="生日"
          placeholder="生日"
          clearable
          :rules="[{ required: true, message: '请填写生日' }]"
        />
        <van-field
          v-model="userInfo.address"
          name="address"
          label="地址"
          placeholder="地址"
          clearable
        />

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import * as UserAPI from "@/api/userInfo";
import MyHeader from "@/components/Header";

export default {
  name: "userModify",
  components: {
    MyHeader
  },
  data() {
    return {
      userId: this.$route.params.id || "",
      headerInfo: {
        leftText: "返回",
        title: "修改信息"
      },
      userInfo: {}
    };
  },
  created() {
    this.queryUserInfo();
  },
  methods: {
    // 获取用户信息
    queryUserInfo() {
      UserAPI.queryUserById(this.userId).then((result = {}) => {
        this.userInfo = result;
      });
    },
    onSubmit(values) {
      let modifyedInfo = {
        id: this.userId,
        ...values
      };
      UserAPI.editUser(modifyedInfo).then(() => {
        this.$router.push({
          name: "UserDetail",
          id: this.userId
        });
      });
    }
  }
};
</script>
